import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';
import Scatter from '../Scatter'
import FirstStore from '../../../../store/firstStore'
import WaterBox from "../WaterBox"
import { Carousel } from "antd";
@observer
class Home extends React.Component {

    constructor(props) {
        super(props);
    }


    public render() {
        const {
            MVCTDoseRateY1, MVCTDoseRateY2, MVCTDoseRateY3, sendInterruptY1, sendInterruptY2, sendInterruptY3,
            TemperatureY1, TemperatureY2, TemperatureY3, WaterFlowY1, WaterFlowY2, WaterFlowY3, WaterFlowY4, WaterFlowY5,
            FinalDose1RateY1, FinalDose1RateY2, TxGunIY1, TxGunIY2, TxGunIY3, MvctGunIY1, MvctGunIY2, MvctGunIY3,
            TxPacY1, TxPacY2, TxPacY3, TxPacY4, TxPacY5, MvctPacY1, MvctPacY2, MvctPacY3, MvctPacY4, MvctPacY5,
            TxInjIPacY1, TxInjIPacY2, TxInjIPacY3, TxInjIPacY4, TxInjIPacY5,
            MvctInjIPacY1, MvctInjIPacY2, MvctInjIPacY3, MvctInjIPacY4, MvctInjIPacY5,
            TxAfcY1, TxAfcY2, TxAfcY3, MvctAfcY1, MvctAfcY2, MvctAfcY3, JawPotY1, JawPotY2, JawPotY3,
            WaterType, waterFixData, waterFlowData,
        } = FirstStore
        return (
            <div className={styles.bottom}>
                <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={2} slidesToScroll={2} autoplaySpeed={20000}>
                    {/* <div id="loop"> */}
                    <div className={styles.top}>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='double' dataY3={sendInterruptY3}
                                max={0.45} min={-0.45}
                                legend={['DR Var hi', 'nom DR', 'DR Var Io']}
                                dataY2={sendInterruptY2} dataY1={sendInterruptY1} title='TX DOSE RATE' />
                        </div>
                        <div className={styles.topRight}>
                            <Scatter isDoubleY='double' dataY3={MVCTDoseRateY3}
                                max={0.45} min={-0.45}
                                legend={['DR Var hi', 'nom DR', 'DR Var Io']}
                                dataY2={MVCTDoseRateY2} dataY1={MVCTDoseRateY1} title='MVCT DOSE RATE' />
                        </div>
                    </div>
                    <div className={styles.top}>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='single' dataY1={TemperatureY1}
                                legend={['Supp temp', 'Rtn temp', 'Amb temp']}
                                max={15000} min={6300}
                                dataY2={TemperatureY2} dataY3={TemperatureY3} title='TEMPERATURE (WATER AND AMBIENT)
' />
                        </div>
                        <div className={styles.topRight}>
                            <WaterBox WaterType={WaterType} title='WATER FLOW' chartData1={waterFixData} chartData2={waterFlowData}
                                legend1={["Hvps",
                                    "LinacBody",
                                    "LinacRfWindow",
                                    "LinacTarget",
                                    "Magnetron",
                                    "MagnetronMagnet",
                                    "Modulator",
                                    "PortCirculator",]}
                                legend2={['Targer', 'RF Window', 'Circulator', 'Mag', 'SSM', "GuideFlow"]}

                            />
                        </div>
                    </div>
                    <div className={styles.top}>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='doubleD' dataY1={FinalDose1RateY1}
                                legend={['Final Mvct Dose-1 Rate', 'Final Tx Dose-1 Rate']}
                                dataY2={FinalDose1RateY2} title='FINAL DOSE-1 RATE' />
                        </div>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='double' dataY1={TxGunIY1} legend={['GUN Var hi', 'GUN Var Io', 'gun I']}
                                max={4.5} min={-4.5}
                                dataY2={TxGunIY2} dataY3={TxGunIY3} title='TX GUN I' />
                        </div>
                    </div>
                    <div className={styles.top}>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='double' dataY1={MvctGunIY1} legend={['GUN Var hi', 'GUN Var Io', 'gun I']}
                                max={4.5} min={-4.5}
                                dataY2={MvctGunIY2} dataY3={MvctGunIY3} title='MVCT GUN I' />
                        </div>
                        <div className={styles.topRight}>
                            <Scatter isDoubleY='' title='TX PAC' dataY1={TxPacY1} dataY2={TxPacY2}
                                legend={['PAC Lim Hi', 'PAC Iim Io', 'PAC Av', 'PAC Proc Lo', 'PAC Proc Hi']}
                                dataY3={TxPacY3}
                                dataY4={TxPacY4} dataY5={TxPacY5} />
                        </div>
                    </div>
                    <div className={styles.top}>
                        <div className={styles.topRight}>
                            <Scatter isDoubleY='' title='MVCT PAC' dataY1={MvctPacY1} dataY2={MvctPacY2}
                                dataY3={MvctPacY3}
                                legend={['PAC Lim Hi', 'PAC Iim Io', 'PAC Av', 'PAC Proc Lo', 'PAC Proc Hi']}
                                dataY4={MvctPacY4} dataY5={MvctPacY5} />
                        </div>
                        <div className={styles.topRight}>
                            <Scatter isDoubleY='' title='TX INJ I' dataY1={TxInjIPacY1} dataY2={TxInjIPacY2}
                                legend={['Inj I Iim Io', 'Inj I Iim Hi', 'Inj I Av', 'Inj I proc Lo', 'Inj I proc Lo Hi']}
                                dataY3={TxInjIPacY3}
                                dataY4={TxInjIPacY4} dataY5={TxInjIPacY5} />
                        </div>
                    </div>
                    <div className={styles.top}>
                        <div className={styles.topRight}>
                            <Scatter isDoubleY='' title='MVCT INJ I' dataY1={MvctInjIPacY1} dataY2={MvctInjIPacY2}
                                legend={['Inj I Iim Io', 'Inj I Iim Hi', 'Inj I Av', 'Inj I proc Lo', 'Inj I proc Lo Hi']}
                                dataY3={MvctInjIPacY3}
                                dataY4={MvctInjIPacY4} dataY5={MvctInjIPacY5} />
                        </div>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='single' dataY1={TxAfcY1}
                                max={0} min={0}
                                legend={['AFC Av psn', 'AFC Pos Max', 'AFC Pos Min']}
                                dataY2={TxAfcY2} dataY3={TxAfcY3} title='TX AFC' />
                        </div>
                    </div>
                    <div className={styles.top}>
                        <div className={styles.topLeft}>
                            <Scatter isDoubleY='single' dataY1={MvctAfcY1}
                                max={0} min={0}
                                legend={['AFC Av Psn', 'AFC Max Pos', 'AFC Min Pos ']}
                                dataY2={MvctAfcY2} dataY3={MvctAfcY3} title='MVCT AFC' />
                        </div>
                        <div className={styles.topLeft}>

                            <Scatter isDoubleY='double' dataY3={JawPotY3} legend={['DR Var hi', 'nom DR', 'DR Var Io']}
                                max={6600} min={0}
                                dataY2={JawPotY2} dataY1={JawPotY1} title='Jaw Pot Voltage/MLC air pressure MLC Air' />
                        </div>
                    </div>
                </Carousel>
                {/* </div> */}
            </div>
        );
    }
}

export default Home;
